"use client";
import { useEffect } from "react";
import style from "./index.module.scss";
import { List, Popconfirm, Popover, Space, Tooltip } from "antd";
import { POST_STATUS, SEVER_URL, VEDIO_STATUS } from "@/configs/constant";
import { DataType } from "@/app/page";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { TVideoData } from "@/app/Course/page";
import { usePathname } from "next/navigation";
export type PrimaryListType = {
  isShowStatus?: boolean;
  typeName?: string | null;
  data?: DataType[];
  vedioData?: TVideoData[];
  loading: boolean;
  total: number;
  getList: (
    pageNum: number,
    pageSize: number,
    postType?: string | null
  ) => void;
  handleEdite?: (value: number, e: any) => void;
  handleClick: (
    value: number,
    userApplyStatus?: string,
    subjectIsApply?: number,
    e?: any
  ) => void;
  handleApply?: (e: any, value: number) => void;
  handleDelete?: (value: number, e: any) => void;
  handleAddCourse?: (value: number, e: any) => void;
  isShowOnnwerAndTime?: boolean;
  handleCheckCourse?: (value: number, e: any) => void;
};

export default function PrimaryList(props: PrimaryListType) {
  const {
    typeName,
    data,
    loading,
    total,
    getList,
    isShowStatus = false,
    isShowOnnwerAndTime = true,
    handleClick,
    vedioData,
    handleApply,
    handleEdite,
    handleDelete,
    handleAddCourse,
    handleCheckCourse,
  } = props;
  useEffect(() => {
    localStorage.getItem("token") && getList(1, 10, typeName);
  }, [typeName]);
  const pathName = usePathname();
  return (
    <div className={style["listContainer"]}>
      {/* 帖子列表 */}
      {data && (
        <List
          itemLayout="vertical"
          size="large"
          pagination={{
            onChange: (page) => {
              getList(page, 10, null);
            },
            pageSize: 10,
            total,
            hideOnSinglePage: total / 10 > 1 ? false : true,
          }}
          dataSource={data}
          loading={loading}
          renderItem={(item, index) => (
            <List.Item
              key={index}
              extra={
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  width={120}
                  alt="logo"
                  src={`${SEVER_URL}${item.postPhoto}`}
                  onClick={() => handleClick(item.id)}
                />
              }
              style={{ cursor: "pointer" }}
            >
              <List.Item.Meta
                title={
                  <span
                    className={style["title"]}
                    onClick={() => handleClick(item.id)}
                  >
                    {item.postTitle}
                  </span>
                }
                description={item.postSummary}
              />

              <div
                style={{ cursor: "default" }}
                className={style["itemFooter"]}
              >
                <span>{item.updateTime}</span>
                <span>
                  作者：{item.postAuthorName ? item.postAuthorName : "匿名用户"}
                </span>
                <Space>
                  {pathName !== "/Post" && (
                    <div>审核状态：{POST_STATUS(item.postStatus)}</div>
                  )}

                  {item.postStatus === 2 && (
                    <Popover content={<p>{item.cause}</p>} title="原因">
                      <QuestionCircleOutlined />
                    </Popover>
                  )}
                  {isShowStatus && (
                    <div className={style["opcation"]}>
                      <span
                        className={style["editBtn"]}
                        onClick={(e) => handleEdite?.(item.id, e)}
                      >
                        编辑
                      </span>
                      <span
                        className={style["editBtn"]}
                        onClick={(e) => handleDelete?.(item.id, e)}
                      >
                        删除
                      </span>
                    </div>
                  )}
                </Space>
              </div>
            </List.Item>
          )}
        />
      )}
      {/* 视频列表 */}
      {vedioData && (
        <List
          itemLayout="vertical"
          size="large"
          pagination={{
            onChange: (page) => {
              getList(page, 10, null);
            },
            pageSize: 10,
            total,
            hideOnSinglePage: total < 10 ? true : false,
          }}
          dataSource={vedioData}
          loading={loading}
          renderItem={(item, index) => (
            <List.Item
              key={index}
              extra={
                <img
                  width={200}
                  height={110}
                  alt="logo"
                  src={`${SEVER_URL}${item.subjectHead}`}
                />
              }
              onClick={(e) =>
                handleClick(
                  item.id,
                  item.userApplyStatus,
                  item.subjectIsApply,
                  e
                )
              }
              className={style["itemCtn"]}
            >
              <List.Item.Meta title={<span>{item.subjectName}</span>} />
              {/* <div className={style["description"]}>
                {item.subjectDescription}
              </div> */}
              <div
                style={{ cursor: "default" }}
                className={style["itemFooter"]}
              >
                {isShowOnnwerAndTime ? (
                  <>
                    <span>更新时间：{item.updateTime}</span>
                    {/* <span>
                      作者：
                      {item.userName ? item.userName : "匿名用户"}
                    </span> */}
                  </>
                ) : null}
                <span>
                  课程权限：
                  {item.userApplyStatus === "1" || item.subjectIsApply === 1 ? (
                    "可观看"
                  ) : (
                    <Popconfirm
                      title="申请观看"
                      description="你是否确认申请观看此视频？"
                      onConfirm={(e) => handleApply?.(e, item.id)}
                      okText="确定"
                      cancelText="取消"
                    >
                      <span className={style["popconfirm"]}>需要申请</span>
                    </Popconfirm>
                  )}
                </span>
                {pathName == "/PersonalCourse" && (
                  <span>审核状态：{VEDIO_STATUS(item.subjectStatus)}</span>
                )}

                {item.subjectStatus === 2 && (
                  <Popover content={<p>{item.cause}</p>} title="原因">
                    <QuestionCircleOutlined />
                  </Popover>
                )}
                <Space>
                  {isShowStatus && (
                    <div className={style["opcation"]}>
                      <span
                        className={style["editBtn"]}
                        onClick={(e) => handleEdite?.(item.id, e)}
                      >
                        编辑
                      </span>
                      <span
                        className={style["editBtn"]}
                        onClick={(e) => handleDelete?.(item.id, e)}
                      >
                        删除
                      </span>
                      <span
                        className={style["editBtn"]}
                        onClick={(e) => handleAddCourse?.(item.id, e)}
                      >
                        添加课程
                      </span>
                      <span
                        className={style["editBtn"]}
                        onClick={(e) => handleCheckCourse?.(item.id, e)}
                      >
                        查看课程
                      </span>
                    </div>
                  )}
                </Space>
              </div>
            </List.Item>
          )}
        />
      )}
    </div>
  );
}
